<template>
<div class="select-city">
  <group>
    <popup-picker :data="data" :class="{'show': show}" :placeholder="placeholder" :columns="columns" value-text-align="left" v-model="select" show-name :disabled="!data.length" @on-show="handleShow" @on-hide="handleHide" @on-change="handleChange" />
  </group>
</div>
</template>
<script>
import {
  Group,
  PopupPicker
} from "vux";
import city from "@/datas/current_address";
export default {
  components: {
    PopupPicker,
    Group
  },
  props: {
    value: Array,
    data: {
      type: Array,
      default: () => city
    },
    columns: {
      type: Number,
      default: 2
    },
    placeholder: {
      type: String,
      default: '所在省／市区'
    }
  },
  data() {
    return {
      show: false
    };
  },
  mounted() {
    this.scrollThroughHandle()
  },
  computed: {
    select: {
      get() {
        return Object.assign([], this.value);
      },
      set(val) {
        this.$emit("input", val);
      }
    }
  },
  methods: {
    handleChange(value) {
      this.$emit("on-change", value);
    },
    handleShow() {
      this.show = true;
      this.$emit("on-show");
    },
    handleHide() {
      this.show = false;
      this.$emit("on-hide");
    },
    scrollThroughHandle() {
      document.querySelector('.vux-popup-header').addEventListener('touchmove', (e) => {
        e.preventDefault()
      })
    }
  }
};
</script>
<style lang="less">
.select-city {
    .vux-popup-header {
        background-color: #fff;
    }

    .show.vux-cell-box {
        height: 42px;
        border-color: #000;

        .weui-cell {
            height: 24px;
        }
    }

    .vux-tap-active {
        &:active {
            background-color: transparent;
        }
    }

    .vux-cell-box {
        width: 100%;
        height: 44px;
        border: 1px solid #D6D6D6;
        display: inline-block;
        box-sizing: border-box;
    }

    .weui-cell {
        height: 24px;
        padding: 10px 14px 10px 12px;
    }

    .weui-cells {
        text-align: center;
        // height: 24px;
        font-size: 14px;

        &:after {
            border-bottom: 0;
        }

        &:before {
            border-top: 0;
        }
    }

    .vux-cell-value {
        color: #000000;
        font-size: 14px;
    }

    .vux-no-group-title {
        margin-top: 0;
    }
    .vux-tap-active {
        .weui-cell__ft {
            padding-right: 13px;
            position: relative;
            &:after {
                content: '';
                display: inline-block;
                background: url("../images/triangle.png") no-repeat;
                background-size: 100% 100%;
                width: 10px;
                height: 6px;
                border: 0;
                transform: none;
                position: absolute;
                top: 50%;
                margin-top: -4px;
                right: 0;
            }
        }
    }

    .weui-cell_access {
        .weui-cell__ft {
            &:after {
                background: url("../images/triangle.png") no-repeat;
                background-size: 100% 100%;
                width: 10px;
                height: 6px;
                border: 0;
                transform: none;
            }
        }
    }

    .vux-popup-picker-placeholder {
        font-size: 14px;
        color: #919191;
    }
}
</style>
